<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    在线引入vue.js-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>-->

    <!--    引入本地的vue.js-->
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
        vue 中可以通过插值语法实现  数据的动态渲染  声明式编程
         {{标识符}}  变量

          1. 插值语法无法识别html标签
          2.使用插值语法进行取值时 支持简单的数学运算   +  -  *  /  以及函数的调用


        注:
        1. template实现数据渲染时  需要有一个根标签
                    '<div>' +
                        '<h1>{{info}}</h1>' +
                        '<h3>学生姓名:{{studentName}}</h3>' +
                        '<h3>学生年龄:{{age}}</h3>' +
                     '</div>'
        2. 为了简化template的写法 可以使用 ` `

        3. 使用template实现数据的渲染  在渲染时会将容器中原有的数据进行覆盖


        vm实例和容器绑定
        1. 选择器不一定非要使用id选择器       可以使用class  .app
        2. 一个vm实例只能绑定一个容器  一个容器只能被一个vm实例绑定
-->
<!--  初始化容器-->
<div class="app">
    <h1>box1</h1>
</div>

<hr>

<div class="app">
    <h1>box2</h1>
</div>

<script type="text/javascript">

    // 关闭vue的生产提示  有时可能会不生效 可以通过直接修改 源码实现关闭操作
    Vue.config.productionTip = false

    // 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
    const vm = new Vue({
        template: `
            <div>
                <h1>{{info.length}}</h1>
                <h3>学生姓名:{{studentName}}</h3>
                <h3>学生年龄:{{age}}</h3>
            </div>`,
        data: {
            info: '学生信息展示',
            studentName: 'tom',
            age: 20
        }
    })
    // 将vue实例和需要渲染容器进行绑定
    // vm.$mount(document.getElementById("app"))
    vm.$mount(".app")
</script>


</body>
</html>
